import { ColorCallBack } from '../../Utils'
import { themeStore } from '../../Config/zustand'
import { useMount } from 'ahooks';
import { GetIndexedDB } from '../../Utils/IndexedDB'
import { useState } from 'react';

const LogoTemplate = () => {
    const imageUrl = sessionStorage.getItem('IMAGE')
    const { logo, menu, theme } = themeStore()
    const [Title, setTitle] = useState()
    const { isFold, menuMax } = menu
    const { logo: Logo, switchLogo, switchUrl, logoBack, logoPx, logoSize, logoRadio, logoMargin, logoPadding, logoShadowX, logoShadowY, logoShadowS, logoShadowB } = logo
    const { title, fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB, boxShadow } = logo

    const logoBackStyle = {
        background: ColorCallBack(logoBack),
        borderRadius: logoRadio,
        backdropFilter: `blur(${logoPx}px)`,
        margin: logoMargin,
        boxShadow: `var(${boxShadow})`,
        maxWidth: menuMax,
        padding: logoPadding,
        width: `calc(100% - ${logoMargin * 2}px)`
    }

    const logoStyle = {
        // width: isFold ? 48 : logoSize,
        height: isFold ? 48 : logoSize,
    }

    const logoImage = {
        filter: `drop-shadow(${logoShadowX}px ${logoShadowY}px ${logoShadowS}px ${logoShadowB})`
    }

    const titleStyle = {
        color: fontColor,
        fontFamily: fontFamily,
        fontWeight: fontWeight,
        fontStyle: fontStyle,
        fontSize: fontSize,
        filter: `drop-shadow(${fontShadowX}px ${fontShadowY}px ${fontShadowS}px ${fontShadowB})`
    }

    useMount(async () => {
        const user = await GetIndexedDB('user')
        setTitle(user.title)
    })

    return (
        <div className={`LogoTemplate ${theme.template}`} style={logoBackStyle}>
            <div className='logo' style={logoStyle}>
                {switchLogo && isFold ?
                    <img src={imageUrl + Logo} alt="" style={logoImage} /> :
                    <img src={imageUrl + switchUrl} alt="" style={logoImage} />
                }
            </div>
            {!switchLogo && theme.template === 'ThemeA01' &&
                <div className='title' style={isFold ? { width: 0, height: 0, ...titleStyle } : { flex: 1, ...titleStyle }}>{Title || title}</div>
            }
            {!switchLogo && theme.template === 'ThemeA02' &&
                <div className='title' style={{ flex: 1, ...titleStyle }}> {Title || title}</div>
            }
        </div>
    )
}

export default LogoTemplate;